<template>
  <page-layout :title="'申报项目名称：' + project.project_name"
               logo="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png">
    <detail-list size="small" :col="2" slot="headerContent">
      <detail-list-item term="创建人">{{ companyUser.company_userrealname }}</detail-list-item>
      <detail-list-item term="申报项目ID">{{ project.project_info_id }}</detail-list-item>
      <detail-list-item term="创建时间">{{ project.project_time }}</detail-list-item>
      <detail-list-item term="参选企业"><a>{{ company.company_name }}</a></detail-list-item>
      <detail-list-item term="项目分类">{{ projectClass.project_class_name }}</detail-list-item>
      <detail-list-item term="简介">{{ project.project_tip }}</detail-list-item>
    </detail-list>
    <template slot="extra">
      <head-info title="状态" :content="projectCheck"/>
    </template>
    <template slot="action">
      <a-button type="primary" v-if="project.project_check !== 1 && visitor !== 'specialist'">修改</a-button>
    </template>
    <a-card :bordered="false" title="流程进度">
      <a-steps :current="process" progress-dot :direction="isMobile ? 'vertical' : 'horizontal'">
        <a-step title="创建项目">
          <a-step-item-group :align="isMobile ? 'left' : 'center'" slot="description">
            <a-step-item :title="companyUser.company_userrealname" icon="dingding-o"/>
            <a-step-item :title="project.project_time"/>
          </a-step-item-group>
        </a-step>
        <a-step title="项目初审">
          <a-step-item-group :align="isMobile ? 'left' : 'center'" slot="description">
            <a-step-item title="项目审核员" icon="dingding-o"/>
            <a-step-item title="催一下" icon="bell"/>
          </a-step-item-group>
        </a-step>
        <a-step title="专家评审">
          <a-step-item-group :align="isMobile ? 'left' : 'center'" slot="description">
            <a-step-item :title="projectClass.project_class_name + '项目评审组'" icon="dingding-o"/>
          </a-step-item-group>
        </a-step>
        <a-step title="奖项颁发">
          <a-step-item-group :align="isMobile ? 'left' : 'center'" slot="description">
            <a-step-item title="" icon="trophy"/>
          </a-step-item-group>
        </a-step>
      </a-steps>
    </a-card>
    <a-card style="margin-top: 24px" :bordered="false" title="项目信息">
      <detail-list>
        <detail-list-item term="项目名称">{{ project.project_name }}</detail-list-item>
        <detail-list-item term="项目简介">{{ project.project_tip }}</detail-list-item>
        <detail-list-item term="项目参选理由">{{ project.project_reasion }}</detail-list-item>
        <detail-list-item term="该数据更新时间">{{ new Date().toLocaleDateString() }}</detail-list-item>
        <detail-list-item term="项目详情">{{ project.project_content }}</detail-list-item>
      </detail-list>
      <a-card type="inner" title="申报信息">
        <detail-list title="公司信息" size="small">
          <detail-list-item term="公司名称">{{ company.company_name }}</detail-list-item>
          <detail-list-item></detail-list-item>
          <detail-list-item term="联系地址">浙江省杭州市西湖区黄姑山路工专路交叉路口</detail-list-item>
        </detail-list>
        <detail-list :col="1"><detail-list-item term="公司描述">{{ company.company_tip }}</detail-list-item></detail-list>
        <a-divider style="margin: 16px 0"/>
        <detail-list title="申报人信息" size="small" :col="3">
          <detail-list-item term="申报人">{{ companyUser.company_userrealname }}</detail-list-item>
          <detail-list-item term="申报人ID">{{ project.company_user_id }}</detail-list-item>
          <detail-list-item term="联系方式">{{ companyUser.company_userphone }}</detail-list-item>
        </detail-list>
      </a-card>
    </a-card>
    <a-card style="margin-top: 24px" :bordered="false" title="专家评分" v-if="visitor === 'specialist'">
      <a-row>
        <a-col :span="12">
          <span class="ant-rate-text">社会效益得分：</span>
          <a-rate :default-value="0" v-model="score" :tooltips="desc" style="color: #fadb14"/>
          <span class="ant-rate-text">{{ score }}</span>
        </a-col>
        <a-col :span="12">
          <a-row>
            <a-col :span="6">
              <span class="ant-rate-text">技术水平得分：</span>
            </a-col>
            <a-col :span="12">
              <a-slider v-model="inputValue" :min="1" :max="100"/>
            </a-col>
            <a-col :span="6">
              <a-input-number v-model="inputValue" :min="1" :max="100" style="marginLeft: 16px" />
            </a-col>
          </a-row>
        </a-col>
      </a-row>
      <a-row style="margin-top: 24px">
        <a-col :span="8"></a-col>
        <a-col :span="8">
          <a-button type="primary" size="large" block @click="putScore" :datafld="scoreDone">确认打分</a-button>
        </a-col>
        <a-col :span="8"></a-col>
      </a-row>
    </a-card>
  </page-layout>
</template>

<script>
import PageLayout from '@/layouts/PageLayout'
import DetailList from '@/components/tool/DetailList'
import AStepItem from '@/components/tool/AStepItem'
import {operation1, operation2, operation3, operationColumns} from '@/mock/common/tableData'
import {mapState} from 'vuex'
import HeadInfo from '@/components/tool/HeadInfo'
import Axios from 'axios'


const DetailListItem = DetailList.Item
const AStepItemGroup = AStepItem.Group

const tabList = [
  {
    key: '1',
    tab: '操作日志一'
  },
  {
    key: '2',
    tab: '操作日志二'
  },
  {
    key: '3',
    tab: '操作日志三'
  }
]

export default {
  name: 'ProjectInfo',
  components: {HeadInfo, AStepItemGroup, AStepItem, DetailListItem, DetailList, PageLayout},
  data() {
    return {
      url: this.$store.state.apiUrl + ':' + this.$store.state.apiPort,
      tabList,
      operationColumns,
      operation1,
      operation2,
      operation3,
      activeTabKey: '2',
      testId: 123123,
      // 申报人
      companyUser: {},
      // 企业信息
      company: {},
      // 项目分类信息
      projectClass: {},
      project: this.$route.params.project,
      // 访问该页面为专家specialist时，显示评分模块
      visitor: this.$route.params.visitor,
      // 专家评分
      score: 0,
      inputValue: 0,
      // 已打分
      scoreDone: false,
      //  评分显示文字
      desc: ['terrible', 'bad', 'normal', 'good', 'wonderful']
    }
  },
  computed: {
    ...mapState('setting', ['isMobile']),
    // // 项目分类,已废弃
    // projectClassName() {
    //   switch (this.project.project_class_id) {
    //     case 0:
    //       return "工业建筑"
    //     case 1:
    //       return "园林建筑"
    //     default:
    //       return "其他建筑"
    //   }
    // },
    projectCheck() {
      switch (this.project.project_check) {
        case 0:
          return "待审核"
        case 1:
          return "已通过"
        case 2:
          return "未通过"
        default:
          return "已结算"
      }
    },
    // 流程进度
    process() {
      switch (this.project.project_check) {
        case 0:
          return 0
        case 1:
          if (this.project.counts > 0)
            return 3
          else
            return 2
        default:
          return 1
      }
    },
    // 最终得分
    finalScore() {
      return (this.score * 20 + this.inputValue) / 2
    }
  },
  methods: {
    onTabChange(key) {
      console.log(key)
    },
    // 提交得分
    putScore() {
      Axios.put(this.url + '/pxManagerSystem/scoringTheProject', {
        "project_info_id": this.project.project_info_id,
        "specialist_id": this.$store.state.specialist.specialist_id,
        "specialist_score": this.finalScore
      }).then(res => {
        if(res.data.state === 304) {
          console.log(res.data)
          this.$message.error('该专家已评分，请勿再次打分')
        }else if(res.data.state === 200) {
          this.$message.success('评分成功')
          this.scoreDone = true
        }else {
          console.log(res.data)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 查询申报人
    getUser() {
      Axios.post(this.url + '/pxManagerSystem/getCompanyUsersByCompanyUsersId', {
        company_user_id: this.project.company_user_id
      }).then(res => {
        this.companyUser = res.data.data.companyUsersList[0]
      }).catch(err => {
        console.log(err)
      })
    },
    // 获取企业信息
    getCompany() {
      Axios.post(this.url + '/pxManagerSystem/getCompanyInfoByCompanyInfoId', {
        company_id: this.project.company_id
      }).then(res => {
        this.company = res.data.data.companyInfoList[0]
      }).catch(err => {
        console.log(err)
      })
    },
    // 获取项目分类信息
    getProjectClass() {
      Axios.post(this.url + '/pxManagerSystem/getProjectClassByProjectClassId', {
        project_class_id: this.project.project_class_id
      }).then(res => {
        this.projectClass = res.data.data.projectClassList[0]
      }).catch(err => {
        console.log(err)
      })
    }
  },
  mounted() {
    this.getUser()
    this.getCompany()
    this.getProjectClass()
  }
}
</script>

<style lang="less" scoped>
</style>
